<!DOCTYPE html>
<html lang="en">
	<head>
		<title>Kraken</title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta name="description" content="Kraken: A lightweight, mobile-first boilerplate for front-end web developers">

		<!-- Icons -->
		<link rel="shortcut icon" type="image/ico" href="favicon.ico">

		<!-- Stylesheet -->
		<link rel="stylesheet" href="dist/main.css" type="text/css">
		<style type="text/css">
			.container-small {
				max-width: 50em;
			}

			html {
				scroll-behavior: smooth;
			}

			@media screen and (prefers-reduced-motion: reduce) {
				html {
					scroll-behavior: auto;
				}
			}


			/**
			 * Nav layout
			 */

			@media (min-width: 40em) {
				.nav {
					align-items: center;
					display: grid;
					grid-template-columns: 1fr 3fr;
					grid-template-rows: 1fr;
					grid-column-gap: 0;
					grid-row-gap: 0;
				}

				.row-thirds {
					align-items: center;
					display: grid;
					grid-template-columns: repeat(3, 1fr);
					grid-template-rows: 1fr;
					grid-column-gap: 0;
					grid-row-gap: 0;
				}
			}


			/**
			 * Nav links
			 */

			nav a {
				text-decoration: none;
			}

			nav a:active,
			nav a:hover {
				text-decoration: underline;
			}


			/**
			 * Background colors
			 */

			.bg-muted {
				background-color: #f7f7f7;
			}

			@media (max-width: 25em) {
				.list-inline li {
					width: 100%;
				}
			}


			/**
			 * Grid Highlighting
			 */

			.grid-highlight {
				background-color: #f7f7f7;
				border: 1px solid #e5e5e5;
				border-radius: 0.0725em;
				margin-bottom: 1.5625em;
				padding: 0.9375em;
			}


			/**
			 * Prism
			 * Code syntax highlighting by Lea Verou.
			 * http://prismjs.com/
			 */

			@media screen {

				.token.comment,
				.token.prolog,
				.token.doctype,
				.token.cdata {
					color: slategray;
				}

				.token.punctuation {
					color: #999;
				}

				.token.property,
				.token.tag,
				.token.boolean,
				.token.number,
				.token.constant,
				.token.symbol {
					color: #905;
				}

				.token.selector,
				.token.attr-name,
				.token.string,
				.token.builtin {
					color: #690;
				}

				.token.operator,
				.token.entity,
				.token.url,
				.language-css .token.string,
				.style .token.string,
				.token.variable {
					color: #a67f59;
				}

				.token.atrule,
				.token.attr-value,
				.token.keyword {
					color: #07a;
				}


				.token.regex,
				.token.important {
					color: #e90;
				}

				.token.important {
					font-weight: bold;
				}

				.token.entity {
					cursor: help;
				}

			}
		</style>
	</head>
	<body>

		<a class="visually-hidden focusable" href="#main">Skip Navigation</a>

		<div class="bg-muted padding-top margin-bottom-large">
			<nav class="container container-small">
				<div class="nav">
					<div>
						<a href="index.html">
							<svg xmlns="http://www.w3.org/2000/svg" role="img" style="height:4em;width:4em;" viewBox="0 0 100 100"><path fill="currentColor" d="M97.035 51.533c-2.617-.202-3.956-2.63-5.297-4.547-1.49-1.908-3.537-3.36-6.032-3.466-6.11-.256-7.966 6.15-6.693 11.002 1.487 5.525 6.41 9.185 8.02 14.482 1.464 4.818-2.184 8.835-7.05 8.835 1.627-1.223 1.35-3.842.272-5.316-.357-.488-1.17-1.25-1.866-1.01-.944.326.546 2.206.673 2.645.757 2.698-2.923 3.102-4.64 2.383-2.06-.86-4-1.784-6.127-2.49.96-1.44 1.37-3.38 1.096-5.088-.086-.688-1.076-3.973-2.35-3.207-.59.335-1.187 3.306-1.6 4.062-.744 1.36-1.718 2.536-3.03 3.382-.86.666-2.81.712-3.17-.58-.294-.958 1.98-1.924 2.543-2.306 1.944-1.317 3.617-3.65 5.146-5.456 5.094-5.76 9.19-12.93 10.84-20.48.593-2.712.03-6.125 2.88-7.345 3.48-1.697 6.677-4.074 5.588-8.384-.828-3.27-2.124-6.467-3.095-9.705C82.34 16.27 81.87 11.898 79.7 9.9c-2.63-2.417-5.608.585-7.215 2.562-2.59 3.188-6.273 4.284-9.97 5.687-3.76 1.427-5.983 3.424-7.9 6.948-1.34 2.91-4.286 4.826-6.514 6.993-4.405 4.26-13.313 10.267-13.846 17.03-.17 1.477.144 2.993-.46 4.405-.528 1.25-1.643 2.054-2.275 3.235-.6 1.12-1.16 2.85-1.16 4.146-.016 1.192.497 2.402.186 3.578-1.923-1.434.065-2.636-.386-4.146-1.263-1.68-5.052 2.32-4.985 3.876-.944-.944-.644-5.89-2.116-5.237-1.986.788-4.077 4.613-2.75 6.575-6.143-3.836-7.137-13.57-3.026-19.042 4.212-5.588 11.528-6.46 17.633-8.828 6.63-2.57 12.204-7.96 9.402-15.542-3.077-8.32-10.505-11.108-18.784-9.715-3.16.542-6.28 2.694-9.496 2.188-1.186-.187-3.46-1.814-3.17-.362.083 1.62 1.75 3.108 2.984 3.935 5.037 3.373 11.205 2.03 16.618.896 5.93-1.24 13.047 4.098 9.512 10.53-3.454 6.307-13.446 7.576-19.468 10.177-11.685 5.048-13.292 21.397-2.23 28.175-3.003 1.32-4.367 3.94-8.027 3.372-1.565-.244-4.093-.6-4.482-2.378C7.42 67.32 8.91 64.44 7.69 65.38c-6.49 5.01 2.533 11.376 7.726 11.216-2.642.992-6.716.98-9.326-.103-1.455-.597-2.29-1.908-2.562-3.436-.265-1.483-1.327-1.464-1.495.06-.28 2.36 1.613 5.33 3.18 6.884 2.31 2.258 5.22 2.668 8.31 2.668-2.19.74-4.757 9.05-2.308 8.684.807-.12 1.096-1.427 1.542-1.947.62-.726 1.438-1.27 2.22-1.805 1.98-1.35 4.392-1.69 6.738-1.795 7.366-.313 19.416 7.174 24.543-1.303 3.494 3.842 9.39 4.648 14.28 3.676 2.634-.52 4.593-2.46 7.16-3.018 2.93-.684 5.332 1.323 8.04 1.98 4.39 1.064 10.896.312 12.803-4.413.276-.68.745-2.478-.375-2.804-.56-.16-2.23 1.604-2.903 1.858-2.49.94-5.58-.308-7.56-1.854 5.147.148 11.377-1.82 11.8-7.766.49-5.66-4.624-10.094-6.96-14.85-.868-1.767-2.892-5.416-.683-6.983 1.577-1.12 3.773 2.41 4.76 3.226 1.95 1.823 4.82 3.036 7.483 2.203.97-.3 5.964-4.223 2.932-4.223-.526-.04.207 0 0 0zM16.787 16.08c7.424.207 10.12-4.265 18.137-1.373.46.167 2.855 1.322 1.668 2.042-.758.46-1.908-.597-3.77-.107-1.725.454-3.377 1.265-5.147 1.636-1.26.263-8.565.85-10.888-2.2zm51.537 61.337c-2.354.3-4.06 1.46-6.193 2.374-1.453.624-3.638 1.087-4.962-.085-1.746-.988-.886-2.377-.886-3.87 1.766 2.76 5.19 2.12 7.73 1.052 1.857-.74 3.418-1.115 5.406-.654 1.94.448 3.445 1.666 5.297 2.2-.833.267-4.436-1.267-6.39-1.016zm-.877-8.13c.846 2.928-1.81 6.063-5.44 7.02-1.51.4-4.89-.298-4.304-1.638.426-.857 1.757 1.168 4.676.267 1.288-.4 3.94-3.12 5.067-5.65zM63.45 19.99c.913-.31 1.822-.64 2.72-.998-2.835 2.428-6.04 4.548-9.313 6.338 1.81-2.455 3.614-4.327 6.592-5.34.31-.105-2.432.828 0 0zM41.16 41.518c3.624-3.596 7.206-7.438 11.18-10.65 3.893-3.308 8.508-5.716 12.755-8.537 2.283-1.685 4.56-3.435 6.524-5.493 1.338-1.407 2.29-3.108 3.59-4.528 4.166-4.557 6.315 6.946 7.077 9.495.727 2.37 1.75 4.72 2.33 7.12.683 2.82-1.025 4.49-3.332 5.856-2.072 1.22-4.586 1.873-6.536 3.24-1.096.904-2.077 2.126-2.287 3.573.055 1.392 1.422-.025 1.692-.502.342-.738 2.34-3.437 2.31-1.377-.04 2.24-.576 4.492-1.22 6.63-1.505 6.152-4.954 11.585-9.024 16.362.047-6.425-5.945-11.08-11.636-12.51-5.027-1.264-12.873-1.713-17.576 1.07-1.338-3.244 2.05-7.622 4.15-9.748.186-.184-.09.09 0 0zM28.6 61.673c.63.434-.957 2.023.598 3.37.286 1.1-1.443.694-1.97.606-1.758-.767.042-4.17 1.372-3.977.074.05-.05-.008 0 0zm-6.562.442l.476-.503c.29 3.697 2.096 5.997 5.89 5.997-2.777 3.76-8.604-2.34-6.366-5.495.05-.24-.055.077 0 0zM80.214 83.18c1.7.657 3.634 1.185 5.448.666-3.25 1.952-7.72 2.637-11.273 1.11-1.722-.737-3.342-1.676-5.255-1.772-2.296-.116-4.196 1.103-6.186 2.048-3.446 1.64-8.41 2.007-11.94.38-2.773-1.277-6.79-4.982-5.123-8.438.184-.384 1.31-1.165 1.105-1.608-.204-.893-1.522-.104-1.853.232-1.715 1.753-.664 4.036-.478 6.09 0 4.522-5.256 4.9-8.697 4.557-7.495-.75-17.762-6.45-23.685 1.448.087-3.265 4.146-5.91 6.89-6.91 3.19-1.16 6.91-.504 10.063.462 3.002.9 5.306 1.234 8.193-.23 1.426-.726 2.54-1.87 3.192-3.328.226-.563.75-3.05-.42-3.05-.323 0-.146 1.883-1.61 3.737-.84 1.066-2.223 1.604-3.52 1.926-3.334.888-6.482-1.075-9.743-1.438-3.058-.313-6.122.098-9.082.86-3.39.874-8.495 1.19-10.688-2.278 5.14 1.708 9.507.764 14.312-1.294 4.748-2.035 9.24-3.146 14.394-2.567.363.04 2.113-.05 1.008-.944-.805-.652-2.41-.834-3.39-.9-2.78-.188-6.025.776-8.662 1.603-2.277.618-4.65 2.026-7.068 1.685-2.696-.388-5.68-1.048-7.497-3.253 2.147.987 5.057 1.722 7.315.7 2.382-.817 3.78-3.268 6.51-3.08 2.194.494 4.626 1.29 6.706-.028 2.31-1.447 3.82-3.272 3.54-6.035-.298-3.075-.398-5.6 1.966-7.965 1.93-2 4.78-3.217 7.45-3.837 5.317-1.23 11.5-.422 16.285 2.213 4.662 2.566 7.917 8.474 3.968 13.208-2.852 3.44-8.093 5.053-8.507 10.203-.13 2.37 1.317 4.026 3.545 4.755 2.618.953 4.984-.287 7.304-1.408 5.85-2.83 10.05.448 15.484 2.48.878.34-.214-.08 0 0zm1.33-36.19c.903-1.077 2.697-1.527 4.03-1.58 4.266-.156 6.03 5.862 9.49 7.608-4.283 4.71-7.815-3.566-11.25-4.46-1.314-.342-3.44-.175-2.27-1.568z"/><path fill="currentColor" d="M60.445 61.983c-.285-1.58-2.18-1.806-2.91-.494-.39.7-.44 1.53-.622 2.27-.76.956-1.954 1.752-2.85 1.016-.403-.332-.604-1.19-.812-1.655-.267-.6-.9-1.263-1.518-1.27-.153-.002-.31.038-.456.13-1.13 1.104-1.063 3.063-.14 4.207.146.16.31.31.484.444.524.41 1.17.707 1.853.856 1.55.45 3.332.31 4.522-.542 1.477-1.05 2.783-3.114 2.45-4.96zM50.244 52.803c-.358.02-.718.18-.85.542-.194.487 0 1.108.49 1.338.393.162.914.13 1.176-.264.358-.556.164-1.305-.47-1.563-.104-.036-.22-.054-.346-.054zM40.882 54.108c-.452-.023-.81.27-.942.694-.13.456.065.98.49 1.175.555.262 1.207-.032 1.403-.588.164-.49-.13-1.045-.6-1.228-.103-.033-.22-.054-.35-.054zM41.86 58.144c-.405-.026-.765.234-.927.563-.13.26-.098.587 0 .848.26.586 1.044.75 1.567.36.326-.293.423-.785.26-1.208-.098-.26-.326-.425-.547-.51-.105-.035-.223-.053-.354-.053zM48.583 39.022c-.267.03-.54.116-.745.266-.206.15-.345.362-.345.64-.008.18.038.342.123.483.256.423.857.64 1.35.478.102-.035.19-.086.266-.15.303-.25.403-.688.303-1.064-.026-.094-.063-.184-.114-.267-.132-.164-.262-.295-.463-.354-.105-.03-.23-.04-.374-.03zM50.748 44.533c-.438.05-.83.247-.992.64-.163.456-.032 1.044.425 1.272.555.26 1.142-.033 1.403-.523.23-.456.13-1.207-.463-1.348-.107-.032-.232-.05-.372-.04zM55.538 32.966c-.1-.007-.195.003-.29.027-.27.047-.5.243-.598.504-.032.092-.052.188-.063.284-.046.488.195.995.686 1.185.26.098.49.132.75 0 .425-.228.52-.718.457-1.143-.032-.36-.262-.62-.583-.78-.108-.044-.228-.07-.36-.076zM64.788 28.203c-.476.005-.9.234-1.063.66-.13.325-.064.684.163.945.424.392 1.044.49 1.535.163.26-.194.327-.487.327-.782 0-.358-.198-.816-.6-.926-.105-.036-.225-.056-.362-.06zM26.416 15.947c-1.01 0-1.212 1.253-.606 1.756.076.063.163.113.265.148.292.12.684.053.947-.147.077-.062.14-.137.19-.22.352-.575.087-1.536-.796-1.536zM25.96 13.793c-1.264 0-1.264 1.958 0 1.958 1.262 0 1.262-1.957 0-1.957zM29.353 14.968c-1.262 0-1.262 1.958 0 1.958 1.263 0 1.263-1.958 0-1.958zM88.11 46.11c-1.264 0-1.264 1.958 0 1.958 1.263 0 1.263-1.96 0-1.96z"/><path fill="currentColor" d="M86.558 47.288c-.505-.04-.83.25-.96.615-.034.092-.053.19-.06.286.01.202-.022.398.103.566.045.086.103.166.174.234.14.137.336.23.587.25 1.26.1 1.417-1.85.158-1.952zM77.688 20.213c-.416 1.435-.393 3.04-.603 4.518-.222 1.568-.475 3.12-.917 4.645-.222.767-.47 1.527-.674 2.3-.09.343-.175.687-.245 1.034-.067.337-.032.928-.24 1.2-.304.395-.313 1.067.35 1.108.67.042 1.066-1.32 1.24-1.808.48-1.36.818-2.798 1.227-4.183.472-1.61.736-3.232.87-4.904.108-1.325.48-2.814.213-4.132-.04-.2-.38-1.45-.752-1.12-.322.28-.4.946-.47 1.343-.316 1.09.005-.042 0 0zM88.698 49.44c-1.264 0-1.264 1.957 0 1.957 1.26 0 1.26-1.958 0-1.958z"/><path fill="currentColor" d="M90.098 48.323c-1.18.454-.474 2.283.705 1.828 1.176-.454.472-2.28-.705-1.827zM28.766 13.01c-1.263 0-1.263 1.957 0 1.957 1.262 0 1.262-1.958 0-1.958zM91.05 51.202c-1.265 0-1.265 1.958 0 1.958 1.26 0 1.26-1.958 0-1.958zM23.478 15.947c-1.263 0-1.263 1.958 0 1.958 1.262 0 1.262-1.958 0-1.958z"/></svg><br>
							<strong class="h1">Kraken</strong>
						</a>
						<p class="text-muted">Version 12</p>
					</div>
					<div>
						<p class="no-margin-bottom">
							<strong>A lightweight, mobile-first boilerplate for front-end developers.</strong> Kraken isn't a framework. It's a starting point for your web projects.
						</p>
					</div>
				</div>

				<ul class="list-inline padding-top">
					<li><a href="getting-started.html">Getting Started</a></li><li class="text-muted">Components</li><li><a href="https://github.com/cferdinandi/kraken/archive/master.zip">Download</a></li>
				</ul>
			</nav>
		</div>

<main class="container container-small" id="main" tabindex="-1" markdown="1"><h1 id="components">Components</h1>
<h2 id="grid">Grid</h2>
<p>The <code>.container</code> class centers content on the page and restricts it to a maximum width.</p>
<pre><code class="language-html">&lt;div class=&quot;container&quot;&gt;
    &lt;p&gt;The &lt;code&gt;.container&lt;/code&gt; class centers content on the page and restricts it to a maximum width.&lt;/p&gt;
&lt;/div&gt;</code></pre>
<p>Kraken also includes a simple, mobile-first grid system built with CSS Grid.</p>
<p>It&#39;s designed to be a starting point you can modify and build on (or delete altogether) depending on your project. Modify as needed.</p>
<h3 id="fraction-based-layouts">Fraction-based layouts</h3>
<p>Kraken uses fraction-based grids, because it makes the math of grid-based layouts easier.</p>
<p>To create a grid, add a <code>&lt;div&gt;</code> with a <code>.row</code> class. You can create grids within a row by creating <code>&lt;div&gt;</code> elements with the <code>.grid-*</code> class.</p>
<div class="row">
    <div class="grid-third grid-highlight">.grid-third</div>
    <div class="grid-two-thirds grid-highlight">.grid-two-thirds</div>
</div>

<div class="row">
    <div class="grid-fourth grid-highlight">.grid-fourth</div>
    <div class="grid-three-fourths grid-highlight">.grid-three-fourths</div>
</div>

<div class="row">
    <div class="grid-half grid-highlight">.grid-half</div>
    <div class="grid-half grid-highlight">.grid-half</div>
</div>

<div class="row">
    <div class="grid-fourth grid-highlight">.grid-fourth</div>
    <div class="grid-half grid-highlight">.grid-half</div>
    <div class="grid-fourth grid-highlight">.grid-fourth</div>
</div>

<pre><code class="language-html">&lt;div class=&quot;row&quot;&gt;
    &lt;div class=&quot;grid-third&quot;&gt;.grid-third&lt;/div&gt;
    &lt;div class=&quot;grid-two-thirds&quot;&gt;.grid-two-thirds&lt;/div&gt;
&lt;/div&gt;

&lt;div class=&quot;row&quot;&gt;
    &lt;div class=&quot;grid-fourth&quot;&gt;.grid-fourth&lt;/div&gt;
    &lt;div class=&quot;grid-three-fourths&quot;&gt;.grid-three-fourths&lt;/div&gt;
&lt;/div&gt;

&lt;div class=&quot;row&quot;&gt;
    &lt;div class=&quot;grid-half&quot;&gt;.grid-half&lt;/div&gt;
    &lt;div class=&quot;grid-half&quot;&gt;.grid-half&lt;/div&gt;
&lt;/div&gt;

&lt;div class=&quot;row&quot;&gt;
    &lt;div class=&quot;grid-fourth&quot;&gt;.grid-fourth&lt;/div&gt;
    &lt;div class=&quot;grid-half&quot;&gt;.grid-half&lt;/div&gt;
    &lt;div class=&quot;grid-fourth&quot;&gt;.grid-fourth&lt;/div&gt;
&lt;/div&gt;</code></pre>
<h3 id="more-or-less-space-between-columns">More or less space between columns</h3>
<p>You can double the space between columns in a grid by adding the <code>.row-gap-large</code> class, or remove it altogether by adding the <code>.row-no-gap</code> class.</p>
<div class="row row-gap-large">
    <div class="grid-third grid-highlight">.grid-third</div>
    <div class="grid-third grid-highlight">.grid-third</div>
    <div class="grid-third grid-highlight">.grid-third</div>
</div>

<div class="row row-no-gap">
    <div class="grid-third grid-highlight">.grid-third</div>
    <div class="grid-third grid-highlight">.grid-third</div>
    <div class="grid-third grid-highlight">.grid-third</div>
</div>

<pre><code class="language-html">&lt;div class=&quot;row row-gap-large&quot;&gt;
    &lt;div class=&quot;grid-third&quot;&gt;.grid-third&lt;/div&gt;
    &lt;div class=&quot;grid-third&quot;&gt;.grid-third&lt;/div&gt;
    &lt;div class=&quot;grid-third&quot;&gt;.grid-third&lt;/div&gt;
&lt;/div&gt;

&lt;div class=&quot;row row-no-gap&quot;&gt;
    &lt;div class=&quot;grid-third&quot;&gt;.grid-third&lt;/div&gt;
    &lt;div class=&quot;grid-third&quot;&gt;.grid-third&lt;/div&gt;
    &lt;div class=&quot;grid-third&quot;&gt;.grid-third&lt;/div&gt;
&lt;/div&gt;</code></pre>
<h3 id="automatically-scaling-grids">Automatically scaling grids</h3>
<p>The <code>.row-auto</code> class will scale the content to fit whatever space is available.</p>
<div class="row row-auto">
    <div class="grid-highlight">Auto Scales</div>
    <div class="grid-highlight">Auto Scales</div>
    <div class="grid-highlight">Auto Scales</div>
    <div class="grid-highlight">Auto Scales</div>
    <div class="grid-highlight">Auto Scales</div>
</div>

<pre><code class="language-html">&lt;div class=&quot;row row-auto&quot;&gt;
    &lt;div&gt;Auto Scales&lt;/div&gt;
    &lt;div&gt;Auto Scales&lt;/div&gt;
    &lt;div&gt;Auto Scales&lt;/div&gt;
    &lt;div&gt;Auto Scales&lt;/div&gt;
    &lt;div&gt;Auto Scales&lt;/div&gt;
&lt;/div&gt;</code></pre>
<h3 id="content-choreography">Content Choreography</h3>
<p>You can flip the order of grid items on bigger screens with a series of helper classes.</p>
<p>Add the <code>.grid-start-first</code> class to move content to the beginning of a row. Use <code>.grid-start-{fraction}</code> classes start content at a specific spot in a grid.</p>
<div class="row">
    <div class="grid-third grid-highlight">1</div>
    <div class="grid-third grid-start-first grid-highlight">2</div>
    <div class="grid-third grid-highlight">3</div>
</div>

<div class="row">
    <div class="grid-third grid-highlight">1</div>
    <div class="grid-third grid-start-two-thirds grid-highlight">2</div>
    <div class="grid-third grid-highlight">3</div>
</div>

<div class="row">
    <div class="grid-third grig-start-two-thirds grid-highlight">1</div>
    <div class="grid-third grid-start-third grid-highlight">2</div>
    <div class="grid-third grid-start-first grid-highlight">3</div>
</div>

<pre><code class="language-html">&lt;div class=&quot;row&quot;&gt;
    &lt;div class=&quot;grid-third&quot;&gt;1&lt;/div&gt;
    &lt;div class=&quot;grid-third grid-start-first&quot;&gt;2&lt;/div&gt;
    &lt;div class=&quot;grid-third&quot;&gt;3&lt;/div&gt;
&lt;/div&gt;

&lt;div class=&quot;row&quot;&gt;
    &lt;div class=&quot;grid-third&quot;&gt;1&lt;/div&gt;
    &lt;div class=&quot;grid-third grid-start-two-thirds&quot;&gt;2&lt;/div&gt;
    &lt;div class=&quot;grid-third&quot;&gt;3&lt;/div&gt;
&lt;/div&gt;

&lt;div class=&quot;row&quot;&gt;
    &lt;div class=&quot;grid-third grig-start-two-thirds&quot;&gt;1&lt;/div&gt;
    &lt;div class=&quot;grid-third grid-start-third&quot;&gt;2&lt;/div&gt;
    &lt;div class=&quot;grid-third grid-start-first&quot;&gt;3&lt;/div&gt;
&lt;/div&gt;</code></pre>
<h2 id="typography">Typography</h2>
<p>Kraken uses relative sizing (ems and %, not pixels) for everything.</p>
<p>The <code>body</code> has a base <code>font-size</code> of <code>100%</code>, which is <code>16px</code> on browsers with default font settings. All other sizes are in ems. Changing the <code>font-size</code> on the <code>body</code> element will adjust the typographical scale for the entire site.</p></p>
<p><em>New to relative sizing? <a href="http://gomakethings.com/working-with-relative-sizing/">Learn more.</a></em></p>
<h3 id="text-basics">Text Basics</h3>
<p>Default text<br>
<span class="text-muted">Muted text</span><br>
<span class="text-small">Small text</span><br>
<span class="text-large">Large text</span><br>
<a href="#">Hyperlinks</a><br>
<strong>Bold</strong>, <em>italics</em>, and <del>strikethrough</del><br>
<mark>Highlighted text</mark></p>
<pre><code class="language-html">Default text
&lt;span class=&quot;text-muted&quot;&gt;Muted text&lt;/span&gt;
&lt;span class=&quot;text-small&quot;&gt;Small text&lt;/span&gt;
&lt;span class=&quot;text-large&quot;&gt;Large text&lt;/span&gt;
&lt;a href=&quot;#&quot;&gt;Hyperlinks&lt;/a&gt;
&lt;strong&gt;Bold&lt;/strong&gt;, &lt;em&gt;italics&lt;/em&gt;, and &lt;del&gt;strikethrough&lt;/del&gt;
&lt;mark&gt;Highlighted text&lt;/mark&gt;</code></pre>
<p><em>Because Kraken uses relative sizing, you should always apply <code>.text-large</code> and <code>.text-small</code> classes to a <code>span</code> element and not directly to a <code>p</code>. Otherwise, your spacing will get all messed up. The <code>.text-*</code> classes can be found in <code>_overrides.scss</code> for better cascade inheritance.</em></p>
<hr>
<h2 id="lists">Lists</h2>
<p>Kraken includes styling for ordered, unordered, unstyled, inline, and definition lists.</p>
<div class="row-thirds">
    <div>
        <strong>Ordered</strong>
        <ol>
            <li>Item 1</li>
            <li>Item 2</li>
            <li>Item 3</li>
        </ol>
    </div>
    <div>
        <strong>Unordered</strong>
        <ul>
            <li>Item 1</li>
            <li>Item 2</li>
            <li>Item 3</li>
        </ul>
    </div>
    <div>
        <strong>Unstyled</strong>
        <ul class="list-unstyled">
            <li>Item 1</li>
            <li>Item 2</li>
            <li>Item 3</li>
        </ul>
    </div>
</div>

<div>
    <strong>Inline</strong>
    <ul class="list-inline">
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
    </ul>
</div>

<dl>
    <dt>Definition List</dt>
    <dd>Encloses a list of pairs of terms and descriptions. Common uses for this element are to implement a glossary or to display metadata (a list of key-value pairs).</dd>
    <dt>Here's another term</dt>
    <dd>And here's the definition that would go with it.</dd>
</dl>

<pre><code class="language-html">Ordered
&lt;ol&gt;
    &lt;li&gt;Item 1&lt;/li&gt;
    &lt;li&gt;Item 2&lt;/li&gt;
    &lt;li&gt;Item 3&lt;/li&gt;
&lt;/ol&gt;

Unordered
&lt;ul&gt;
    &lt;li&gt;Item 1&lt;/li&gt;
    &lt;li&gt;Item 2&lt;/li&gt;
    &lt;li&gt;Item 3&lt;/li&gt;
&lt;/ul&gt;

Unstyled
&lt;ul class=&quot;list-unstyled&quot;&gt;
    &lt;li&gt;Item 1&lt;/li&gt;
    &lt;li&gt;Item 2&lt;/li&gt;
    &lt;li&gt;Item 3&lt;/li&gt;
&lt;/ul&gt;

Inline
&lt;ul class=&quot;list-inline&quot;&gt;
    &lt;li&gt;Item 1&lt;/li&gt;
    &lt;li&gt;Item 2&lt;/li&gt;
    &lt;li&gt;Item 3&lt;/li&gt;
&lt;/ul&gt;

&lt;dl&gt;
    &lt;dt&gt;Definition List&lt;/dt&gt;
    &lt;dd&gt;Encloses a list of pairs of terms and descriptions. Common uses for this element are to implement a glossary or to display metadata (a list of key-value pairs).&lt;/dd&gt;

    &lt;dt&gt;Here&#39;s another term&lt;/dt&gt;
    &lt;dd&gt;And here&#39;s the definition that would go with it.&lt;/dd&gt;
&lt;/dl&gt;</code></pre>
<p><em>For semantic reasons, <code>.list-unstyled</code> and <code>.list-inline</code> should only be applied to unordered lists.</em></p>
<hr>
<h2 id="headings">Headings</h2>
<p>Kraken includes styling for <code>h1</code> through <code>h6</code> headings.</p>
<h1>h1. Heading 1</h1>
<h2>h2. Heading 2</h2>
<h3>h3. Heading 3</h3>
<h4>h4. Heading 4</h4>
<h5>h5. Heading 5</h5>
<h6>h6. Heading 6</h6>


<pre><code class="language-html">&lt;h1&gt;h1. Heading 1&lt;/h1&gt;
&lt;h2&gt;h2. Heading 2&lt;/h2&gt;
&lt;h3&gt;h3. Heading 3&lt;/h3&gt;
&lt;h4&gt;h4. Heading 4&lt;/h4&gt;
&lt;h5&gt;h5. Heading 5&lt;/h5&gt;
&lt;h6&gt;h6. Heading 6&lt;/h6&gt;</code></pre>
<h3 id="semantic-heading-classes">Semantic Heading Classes</h3>
<p>All heading values can also be applied as classes. For example, if a heading should be an <code>h1</code> element semantically, but you would like it to be styled as an <code>h4</code> element, you can apply <code>class=&quot;h4&quot;</code> to the <code>h1</code> element.</p>
<h1 class="h4">This is an h1 heading that's styled as an h4 heading</h1>

<pre><code class="language-html">&lt;h1 class=&quot;h4&quot;&gt;This is an h1 heading that&#39;s styled as an h4 heading&lt;/h1&gt;</code></pre>
<hr>
<h2 id="quotes--citations">Quotes &amp; Citations</h2>
<blockquote>
    Someone once said something so important, it was deemed worthy of repeating here in the form of a blockquote. This is that blockquote.
    <cite>- Someone Important</cite>
</blockquote>

<p>You can also include superscripts<sup>1</sup> and subscripts<sub>xyz</sub>.</p>
<pre><code class="language-html">&lt;blockquote&gt;
    Someone once said something so important, it was deemed worthy of repeating here in the form of a blockquote. This is that blockquote.
    &lt;cite&gt;- Someone Important&lt;/cite&gt;
&lt;/blockquote&gt;

You can also include superscripts&lt;sup&gt;1&lt;/sup&gt; and subscripts&lt;sub&gt;xyz&lt;/sub&gt;.</code></pre>
<hr>
<h2 id="code">Code</h2>
<p>Inline code: <code>.js-example</code>.</p>
<pre><code>/* Preformatted Text */
.js-example {
    color: #272727;
    background: #ffffff;
}</code></pre><pre><code class="language-html">&lt;p&gt;Inline code: &lt;code&gt;.js-example&lt;/code&gt;&lt;/p&gt;

&lt;pre&gt;&lt;code&gt;/* Preformatted Text */
.js-example {
    color: #272727;
    background: #ffffff;
}&lt;/code&gt;&lt;/pre&gt;</code></pre>
<p>You&#39;ll need to escape brackets contained in code by typing <code>&amp;lt;</code> for <code>&lt;</code> and <code>&amp;gt;</code> for <code>&gt;</code>. The syntax highlighting used in this documentation is provided by <a href="http://prismjs.com/">Prism</a> by Lea Verou.</p>
<hr>
<h2 id="lines">Lines</h2>
<p>Add lines to your markup using the <code>&lt;hr&gt;</code> element.</p>
<hr>
<h2 id="buttons">Buttons</h2>
<p>Button styles can be applied to anything with the <code>.btn</code> class applied. However, typically you&#39;ll want to apply these to only <code>a</code>, <code>button</code>, and <code>&lt;input type=&quot;submit&quot;&gt;</code> elements for the best rendering.</p>
<h3 id="basic-buttons">Basic Buttons</h3>
<p><button class="btn">Button</button>
<button class="btn btn-secondary">Button Secondary</button>
<button class="btn btn-large">Button Large</button></p>
<p><button class="btn btn-block">Button Block</button>
<button class="btn btn-secondary btn-block">Button Block</button></p>
<pre><code class="language-html">&lt;button class=&quot;btn&quot;&gt;Button&lt;/button&gt;
&lt;button class=&quot;btn btn-secondary&quot;&gt;Button Secondary&lt;/button&gt;
&lt;button class=&quot;btn btn-large&quot;&gt;Button Large&lt;/button&gt;

&lt;button class=&quot;btn btn-block&quot;&gt;Button Block&lt;/button&gt;
&lt;button class=&quot;btn btn-secondary btn-block&quot;&gt;Button Block&lt;/button&gt;

&lt;button class=&quot;btn active&quot;&gt;Button Active&lt;/button&gt;
&lt;button class=&quot;btn btn-secondary active&quot;&gt;Button Secondary Active&lt;/button&gt;

&lt;button class=&quot;btn&quot; disabled&gt;Button Disabled&lt;/button&gt;
&lt;button class=&quot;btn btn-secondary&quot; disabled&gt;Button Secondary Disabled&lt;/button&gt;</code></pre>
<h3 id="disabled-buttons">Disabled Buttons</h3>
<p>Use the <code>[disabled]</code> attribute to change the appearance of buttons&mdash;useful for creating apps.</p>
<p><button class="btn" disabled>Disabled</button>
<button class="btn btn-secondary" disabled>Secondary Disabled</button></p>
<pre><code class="language-html">&lt;button class=&quot;btn&quot; disabled&gt;Disabled&lt;/button&gt;
&lt;button class=&quot;btn btn-secondary&quot; disabled&gt;Secondary Disabled&lt;/button&gt;</code></pre>
<hr>
<h2 id="tables">Tables</h2>
<p>Kraken includes simple, easy-to-read table styling.</p>
<table>
    <thead>
        <tr>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Super Hero</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Peter</td>
            <td>Parker</td>
            <td>Spiderman</td>
        </tr>
        <tr>
            <td>Bruce</td>
            <td>Wayne</td>
            <td>Batman</td>
        </tr>
        <tr>
            <td>Clark</td>
            <td>Kent</td>
            <td>Superman</td>
        </tr>
    </tbody>
</table>

<pre><code class="language-html">&lt;table&gt;
    &lt;thead&gt;
        &lt;tr&gt;
            &lt;th&gt;First Name&lt;/th&gt;
            &lt;th&gt;Last Name&lt;/th&gt;
            &lt;th&gt;Super Hero&lt;/th&gt;
        &lt;/tr&gt;
    &lt;/thead&gt;
    &lt;tbody&gt;
        &lt;tr&gt;
            &lt;td&gt;Peter&lt;/td&gt;
            &lt;td&gt;Parker&lt;/td&gt;
            &lt;td&gt;Spiderman&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
            &lt;td&gt;Bruce&lt;/td&gt;
            &lt;td&gt;Wayne&lt;/td&gt;
            &lt;td&gt;Batman&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
            &lt;td&gt;Clark&lt;/td&gt;
            &lt;td&gt;Kent&lt;/td&gt;
            &lt;td&gt;Superman&lt;/td&gt;
        &lt;/tr&gt;
    &lt;/tbody&gt;
&lt;/table&gt;</code></pre>
<h3 id="condensed-table">Condensed Table</h3>
<p>Add the <code>.table-condensed</code> class for more compact tables.</p>
<table class="table-condensed">
    <thead>
        <tr>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Super Hero</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Peter</td>
            <td>Parker</td>
            <td>Spiderman</td>
        </tr>
        <tr>
            <td>Bruce</td>
            <td>Wayne</td>
            <td>Batman</td>
        </tr>
        <tr>
            <td>Clark</td>
            <td>Kent</td>
            <td>Superman</td>
        </tr>
    </tbody>
</table>

<pre><code class="language-html">&lt;table class=&quot;table-condensed&quot;&gt;
    &lt;!-- Your table content... --&gt;
&lt;/table&gt;</code></pre>
<h3 id="zebra-striping">Zebra Striping</h3>
<p>Add zebra striping for easier readability with the <code>.table-striped</code> class.</p>
<table class="table-striped">
    <thead>
        <tr>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Super Hero</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Peter</td>
            <td>Parker</td>
            <td>Spiderman</td>
        </tr>
        <tr>
            <td>Bruce</td>
            <td>Wayne</td>
            <td>Batman</td>
        </tr>
        <tr>
            <td>Clark</td>
            <td>Kent</td>
            <td>Superman</td>
        </tr>
    </tbody>
</table>

<pre><code class="language-html">&lt;table class=&quot;table-striped&quot;&gt;
    &lt;!-- Your table content... --&gt;
&lt;/table&gt;</code></pre>
<h3 id="combining-classes">Combining Classes</h3>
<p>Classes can be combined as needed.</p>
<table class="table-condensed table-striped">
    <thead>
        <tr>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Super Hero</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td data-label="First Name">Peter</td>
            <td data-label="Last Name">Parker</td>
            <td data-label="Super Hero">Spiderman</td>
        </tr>
        <tr>
            <td data-label="First Name">Bruce</td>
            <td data-label="Last Name">Wayne</td>
            <td data-label="Super Hero">Batman</td>
        </tr>
        <tr>
            <td data-label="First Name">Clark</td>
            <td data-label="Last Name">Kent</td>
            <td data-label="Super Hero">Superman</td>
        </tr>
    </tbody>
</table>

<pre><code class="language-html">&lt;table class=&quot;table-condensed table-striped&quot;&gt;
    &lt;!-- Your table content... --&gt;
&lt;/table&gt;</code></pre>
<hr>
<h2 id="forms">Forms</h2>
<p>Labels, legends and inputs are styled as full width block elements (with the exception of checkboxes and radio buttons).</p>
<h3 id="basic-forms">Basic Forms</h3>
<form>
    <label for="input">Label</label>
    <input type="text" id="input">
    <label>
        <input type="checkbox">
        Option 1
    </label>
    <label>
        <input type="checkbox">
        Option 2
    </label>
    <label>
        <input type="radio" name="radioset">
        Option A
    </label>
    <label>
        <input type="radio" name="radioset">
        Option B
    </label>
    <label for="select">Select Menu</label>
    <select id="select">
        <option>Select 1</option>
        <option>Select 2</option>
        <option>Select 3</option>
    </select>
    <label for="textarea">Textarea</label>
    <textarea id="textarea"></textarea>
</form>

<pre><code class="language-html">&lt;form&gt;
    &lt;label for=&quot;input&quot;&gt;Label&lt;/label&gt;
    &lt;input type=&quot;text&quot; id=&quot;input&quot;&gt;

    &lt;label&gt;
        &lt;input type=&quot;checkbox&quot;&gt;
        Option 1
    &lt;/label&gt;
    &lt;label&gt;
        &lt;input type=&quot;checkbox&quot;&gt;
        Option 2
    &lt;/label&gt;

    &lt;label&gt;
        &lt;input type=&quot;radio&quot; name=&quot;radioset&quot;&gt;
        Option A
    &lt;/label&gt;
    &lt;label&gt;
        &lt;input type=&quot;radio&quot; name=&quot;radioset&quot;&gt;
        Option B
    &lt;/label&gt;

    &lt;label for=&quot;select&quot;&gt;Select Menu&lt;/label&gt;
    &lt;select id=&quot;select&quot;&gt;
        &lt;option&gt;Select 1&lt;/option&gt;
        &lt;option&gt;Select 2&lt;/option&gt;
        &lt;option&gt;Select 3&lt;/option&gt;
    &lt;/select&gt;

    &lt;label for=&quot;textarea&quot;&gt;Textarea&lt;/label&gt;
    &lt;textarea id=&quot;textarea&quot;&gt;&lt;/textarea&gt;
&lt;/form&gt;</code></pre>
<p><em>Wrap checkboxes and radio buttons inside a <code>label</code> to make them easier to click.</em></p>
<h3 id="condensed--inline-inputs">Condensed &amp; Inline Inputs</h3>
<p>For smaller forms, add the <code>.input-condensed</code> class to your input fields. For inline form elements, add the <code>.input-inline</code> class.</p>
<form>
    <input type="text" class="input-inline" placeholder=".input-inline">
    <input type="text" class="input-condensed input-inline" placeholder=".input-condensed">
</form>

<pre><code class="language-html">&lt;form&gt;
    &lt;input type=&quot;text&quot; class=&quot;input-inline&quot;&gt;
    &lt;input type=&quot;text&quot; class=&quot;input-condensed input-inline&quot;&gt;
&lt;/form&gt;</code></pre>
<h3 id="search-forms">Search Forms</h3>
<p>Apply special styling to search form elements using the <code>.input-search</code> and <code>.btn-search</code> classes. You&#39;ll also need to use the <code>.input-inline</code> class.</p>
<form>
    <label class="visually-hidden" for="search">Search this site</label>
    <input type="text" class="input-inline input-search no-margin-bottom" id="search" name="search" placeholder="Your search terms..." value="">
    <button type="submit" class="btn-search" id="searchsubmit">
        <svg xmlns="http://www.w3.org/2000/svg" style="height:1em;width:1em;" viewBox="0 0 32 32" aria-describedby="search-button-title"><title id="search-button-title">Search</title><path fill="currentColor" d="M31.008 27.23l-7.58-6.446c-.784-.705-1.622-1.03-2.3-.998C22.92 17.69 24 14.97 24 12 24 5.37 18.627 0 12 0S0 5.37 0 12c0 6.626 5.374 12 12 12 2.973 0 5.692-1.082 7.788-2.87-.03.676.293 1.514.998 2.298l6.447 7.58c1.105 1.226 2.908 1.33 4.008.23s.997-2.903-.23-4.007zM12 20c-4.418 0-8-3.582-8-8s3.582-8 8-8 8 3.582 8 8-3.582 8-8 8z"/></svg>
    </button>
</form>

<pre><code class="language-html">&lt;form&gt;
    &lt;label class=&quot;visually-hidden&quot; for=&quot;search&quot;&gt;Search this site&lt;/label&gt;
    &lt;input type=&quot;text&quot; class=&quot;input-inline input-search no-margin-bottom&quot; id=&quot;search&quot; name=&quot;search&quot; placeholder=&quot;Your search terms...&quot; value=&quot;&quot;&gt;
    &lt;button type=&quot;submit&quot; class=&quot;btn-search&quot; id=&quot;searchsubmit&quot;&gt;
        &lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; style=&quot;height:1em;width:1em;&quot; viewBox=&quot;0 0 32 32&quot; aria-describedby=&quot;search-button-title&quot;&gt;&lt;title id=&quot;search-button-title&quot;&gt;Search&lt;/title&gt;&lt;path fill=&quot;currentColor&quot; d=&quot;M31.008 27.23l-7.58-6.446c-.784-.705-1.622-1.03-2.3-.998C22.92 17.69 24 14.97 24 12 24 5.37 18.627 0 12 0S0 5.37 0 12c0 6.626 5.374 12 12 12 2.973 0 5.692-1.082 7.788-2.87-.03.676.293 1.514.998 2.298l6.447 7.58c1.105 1.226 2.908 1.33 4.008.23s.997-2.903-.23-4.007zM12 20c-4.418 0-8-3.582-8-8s3.582-8 8-8 8 3.582 8 8-3.582 8-8 8z&quot;/&gt;&lt;/svg&gt;
    &lt;/button&gt;
&lt;/form&gt;</code></pre>
<hr>
<h2 id="alignment-spacing--visibility">Alignment, Spacing &amp; Visibility</h2>
<p>You can adjust text alignment, spacing, and visibility using a few simple CSS classes.</p>
<h3 id="text-alignment">Text Alignment</h3>
<table>
<thead>
<tr>
<th>Class</th>
<th>Alignment</th>
</tr>
</thead>
<tbody><tr>
<td><code>.text-left</code></td>
<td>Left</td>
</tr>
<tr>
<td><code>.text-center</code></td>
<td>Centered</td>
</tr>
<tr>
<td><code>.text-right</code></td>
<td>Right</td>
</tr>
<tr>
<td><code>.text-right-medium</code></td>
<td>Right above 40em</td>
</tr>
</tbody></table>
<h3 id="floats">Floats</h3>
<table>
<thead>
<tr>
<th>Class</th>
<th>Float</th>
</tr>
</thead>
<tbody><tr>
<td><code>.float-left</code></td>
<td>Left</td>
</tr>
<tr>
<td><code>.float-center</code></td>
<td>Centered</td>
</tr>
<tr>
<td><code>.float-right</code></td>
<td>Right</td>
</tr>
</tbody></table>
<p><em>Clear floats by wrapping floated content in a <code>div</code> with the <code>.clearfix</code> class.</em></p>
<pre><code class="language-html">&lt;div class=&quot;clearfix&quot;&gt;
    &lt;button class=&quot;float-right&quot;&gt;Floated to the Right&lt;/button&gt;
    &lt;button&gt;Not floated&lt;/button&gt;
&lt;/div&gt;</code></pre>
<h3 id="margins">Margins</h3>
<table>
<thead>
<tr>
<th>Class</th>
<th>Margin</th>
</tr>
</thead>
<tbody><tr>
<td><code>.no-margin-top</code></td>
<td>top: <code>0</code></td>
</tr>
<tr>
<td><code>.no-margin-bottom</code></td>
<td>bottom: <code>0</code></td>
</tr>
<tr>
<td><code>.margin-top</code></td>
<td>top: <code>1.5625em</code></td>
</tr>
<tr>
<td><code>.margin-bottom</code></td>
<td>bottom: <code>1.5625em</code></td>
</tr>
<tr>
<td><code>.margin-bottom-small</code></td>
<td>bottom: <code>0.5em</code></td>
</tr>
<tr>
<td><code>.margin-bottom-large</code></td>
<td>bottom: <code>2em</code></td>
</tr>
</tbody></table>
<h3 id="padding">Padding</h3>
<table>
<thead>
<tr>
<th>Class</th>
<th>padding</th>
</tr>
</thead>
<tbody><tr>
<td><code>.no-padding-top</code></td>
<td>top: <code>0</code></td>
</tr>
<tr>
<td><code>.no-padding-bottom</code></td>
<td>bottom: <code>0</code></td>
</tr>
<tr>
<td><code>.padding-top</code></td>
<td>top: <code>1.5625em</code></td>
</tr>
<tr>
<td><code>.padding-top-small</code></td>
<td>top: <code>0.5em</code></td>
</tr>
<tr>
<td><code>.padding-top-large</code></td>
<td>top: <code>2em</code></td>
</tr>
<tr>
<td><code>.padding-bottom</code></td>
<td>bottom: <code>1.5625em</code></td>
</tr>
<tr>
<td><code>.padding-bottom-small</code></td>
<td>bottom: <code>0.5em</code></td>
</tr>
<tr>
<td><code>.padding-bottom-large</code></td>
<td>bottom: <code>2em</code></td>
</tr>
</tbody></table>
<h3 id="visibility">Visibility</h3>
<p>Hide content using the <code>[hidden]</code> attribute.</p>
<pre><code class="language-html">&lt;div hidden&gt;This is removed from the markup.&lt;/div&gt;</code></pre>
<p>If you have text that you don&#39;t want displayed on screen, but that should still be in the markup for screen readers (for example, a search form label), simply apply the <code>.visually-hidden</code> class.</p></p>
<pre><code class="language-html">&lt;form&gt;
    &lt;label class=&quot;visually-hidden&quot;&gt;Search this site&lt;/label&gt;
    &lt;input type=&quot;text&quot; placeholder=&quot;Search this site...&quot;&gt;
    &lt;input type=&quot;submit&quot;&gt;
&lt;/form&gt;</code></pre>
<p>For visually hidden content that should become visible on focus (such as a <a href="http://webaim.org/techniques/skipnav/">skip nav link</a> for sighted users navigating by keyboard), add the <code>.focusable</code> class.</p>
<pre><code class="language-html">&lt;a class=&quot;visually-hidden focusable&quot; href=&quot;#main&quot;&gt;Skip to content&lt;/a&gt;</code></pre>
<h2 id="tabindex--focus-styles">Tabindex &amp; Focus Styles</h2>
<p>Focusable elements should <em>always</em> have <code>:focus</code> styles on them. You can customize them, but don&#39;t remove them altogether.</p>
<p>If you need to programmatically add focus to an element that&#39;s not normally focusable (like a <code>div</code>), you need to give it a <code>tabindex</code> attribute of <code>-1</code>. However, this also applies <code>:focus</code> styles, which are likely not desired or needed in these rare edge cases.</p>
<p>Kraken removes the default outline from items with <code>[tabindex=&quot;-1&quot;]</code>.</p>
<pre><code class="language-html">&lt;a class=&quot;visually-hidden focusable&quot; href=&quot;#main&quot;&gt;Skip to content&lt;/a&gt;
...
&lt;main id=&quot;main&quot; tabindex=&quot;-1&quot;&gt;
    ...
&lt;/main&gt;</code></pre>
</main>

		<footer class="container container-small padding-bottom">
			<hr>
			<nav>
				<ul class="list-inline">
					<li><a href="https://github.com/cferdinandi/kraken/issues">Report Bugs</a></li>
					<li><a href="https://github.com/cferdinandi/kraken">GitHub</a></li>
					<li><a href="https://github.com/cferdinandi/kraken/blob/master/LICENSE.md">MIT License</a></li>
				</ul>
			</nav>
			<p class="text-small text-muted">Made with ❤️ <a href="https://gomakethings.com">Chris Ferdinandi</a>. Kraken logo by <a href="http://thenounproject.com/term/squid/30310/">Joe Shelton from the Noun Project</a>.</p>
		</footer>


		<script>
			// Table of Contents
			(function () {

				// Variables
				var h1 = document.querySelector('h1');
				var headings = document.querySelectorAll('main h2');
				var toc = document.createElement('nav');

				// Create toc items
				toc.innerHTML = '<ul class="list-inline">' + Array.prototype.map.call(headings, function (heading) {

					// Make sure heading has an ID
					if (!heading.id) return '';

					// create the list item
					return '<li><a href="#' + heading.id + '">' + heading.textContent + '</a></li>';

				}).filter(function (item) {
					return item.length > 0;
				}).join('') + '</ul>';

				// Inject the TOC
				h1.parentNode.insertBefore(toc, h1);

			})();

			/*! PrismJS 1.15.0| https://prismjs.com/download.html#themes=prism&languages=markup+css+clike+scss */
			var _self="undefined"!=typeof window?window:"undefined"!=typeof WorkerGlobalScope&&self instanceof WorkerGlobalScope?self:{},Prism=function(){var e=/\blang(?:uage)?-([\w-]+)\b/i,t=0,n=_self.Prism={manual:_self.Prism&&_self.Prism.manual,disableWorkerMessageHandler:_self.Prism&&_self.Prism.disableWorkerMessageHandler,util:{encode:function(e){return e instanceof a?new a(e.type,n.util.encode(e.content),e.alias):"Array"===n.util.type(e)?e.map(n.util.encode):e.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/\u00a0/g," ")},type:function(e){return Object.prototype.toString.call(e).slice(8,-1)},objId:function(e){return e.__id||Object.defineProperty(e,"__id",{value:++t}),e.__id},clone:function(e,t){var a=n.util.type(e);switch(t=t||{},a){case"Object":if(t[n.util.objId(e)])return t[n.util.objId(e)];var r={};t[n.util.objId(e)]=r;for(var l in e)e.hasOwnProperty(l)&&(r[l]=n.util.clone(e[l],t));return r;case"Array":if(t[n.util.objId(e)])return t[n.util.objId(e)];var r=[];return t[n.util.objId(e)]=r,e.forEach(function(e,a){r[a]=n.util.clone(e,t)}),r}return e}},languages:{extend:function(e,t){var a=n.util.clone(n.languages[e]);for(var r in t)a[r]=t[r];return a},insertBefore:function(e,t,a,r){r=r||n.languages;var l=r[e],i={};for(var o in l)if(l.hasOwnProperty(o)){if(o==t)for(var s in a)a.hasOwnProperty(s)&&(i[s]=a[s]);a.hasOwnProperty(o)||(i[o]=l[o])}var u=r[e];return r[e]=i,n.languages.DFS(n.languages,function(t,n){n===u&&t!=e&&(this[t]=i)}),i},DFS:function(e,t,a,r){r=r||{};for(var l in e)e.hasOwnProperty(l)&&(t.call(e,l,e[l],a||l),"Object"!==n.util.type(e[l])||r[n.util.objId(e[l])]?"Array"!==n.util.type(e[l])||r[n.util.objId(e[l])]||(r[n.util.objId(e[l])]=!0,n.languages.DFS(e[l],t,l,r)):(r[n.util.objId(e[l])]=!0,n.languages.DFS(e[l],t,null,r)))}},plugins:{},highlightAll:function(e,t){n.highlightAllUnder(document,e,t)},highlightAllUnder:function(e,t,a){var r={callback:a,selector:'code[class*="language-"], [class*="language-"] code, code[class*="lang-"], [class*="lang-"] code'};n.hooks.run("before-highlightall",r);for(var l,i=r.elements||e.querySelectorAll(r.selector),o=0;l=i[o++];)n.highlightElement(l,t===!0,r.callback)},highlightElement:function(t,a,r){for(var l,i,o=t;o&&!e.test(o.className);)o=o.parentNode;o&&(l=(o.className.match(e)||[,""])[1].toLowerCase(),i=n.languages[l]),t.className=t.className.replace(e,"").replace(/\s+/g," ")+" language-"+l,t.parentNode&&(o=t.parentNode,/pre/i.test(o.nodeName)&&(o.className=o.className.replace(e,"").replace(/\s+/g," ")+" language-"+l));var s=t.textContent,u={element:t,language:l,grammar:i,code:s},g=function(e){u.highlightedCode=e,n.hooks.run("before-insert",u),u.element.innerHTML=u.highlightedCode,n.hooks.run("after-highlight",u),n.hooks.run("complete",u),r&&r.call(u.element)};if(n.hooks.run("before-sanity-check",u),!u.code)return n.hooks.run("complete",u),void 0;if(n.hooks.run("before-highlight",u),!u.grammar)return g(n.util.encode(u.code)),void 0;if(a&&_self.Worker){var c=new Worker(n.filename);c.onmessage=function(e){g(e.data)},c.postMessage(JSON.stringify({language:u.language,code:u.code,immediateClose:!0}))}else g(n.highlight(u.code,u.grammar,u.language))},highlight:function(e,t,r){var l={code:e,grammar:t,language:r};return n.hooks.run("before-tokenize",l),l.tokens=n.tokenize(l.code,l.grammar),n.hooks.run("after-tokenize",l),a.stringify(n.util.encode(l.tokens),l.language)},matchGrammar:function(e,t,a,r,l,i,o){var s=n.Token;for(var u in a)if(a.hasOwnProperty(u)&&a[u]){if(u==o)return;var g=a[u];g="Array"===n.util.type(g)?g:[g];for(var c=0;c<g.length;++c){var f=g[c],h=f.inside,d=!!f.lookbehind,m=!!f.greedy,p=0,y=f.alias;if(m&&!f.pattern.global){var v=f.pattern.toString().match(/[imuy]*$/)[0];f.pattern=RegExp(f.pattern.source,v+"g")}f=f.pattern||f;for(var b=r,k=l;b<t.length;k+=t[b].length,++b){var w=t[b];if(t.length>e.length)return;if(!(w instanceof s)){if(m&&b!=t.length-1){f.lastIndex=k;var _=f.exec(e);if(!_)break;for(var j=_.index+(d?_[1].length:0),P=_.index+_[0].length,A=b,O=k,x=t.length;x>A&&(P>O||!t[A].type&&!t[A-1].greedy);++A)O+=t[A].length,j>=O&&(++b,k=O);if(t[b]instanceof s)continue;I=A-b,w=e.slice(k,O),_.index-=k}else{f.lastIndex=0;var _=f.exec(w),I=1}if(_){d&&(p=_[1]?_[1].length:0);var j=_.index+p,_=_[0].slice(p),P=j+_.length,N=w.slice(0,j),S=w.slice(P),E=[b,I];N&&(++b,k+=N.length,E.push(N));var C=new s(u,h?n.tokenize(_,h):_,y,_,m);if(E.push(C),S&&E.push(S),Array.prototype.splice.apply(t,E),1!=I&&n.matchGrammar(e,t,a,b,k,!0,u),i)break}else if(i)break}}}}},tokenize:function(e,t){var a=[e],r=t.rest;if(r){for(var l in r)t[l]=r[l];delete t.rest}return n.matchGrammar(e,a,t,0,0,!1),a},hooks:{all:{},add:function(e,t){var a=n.hooks.all;a[e]=a[e]||[],a[e].push(t)},run:function(e,t){var a=n.hooks.all[e];if(a&&a.length)for(var r,l=0;r=a[l++];)r(t)}}},a=n.Token=function(e,t,n,a,r){this.type=e,this.content=t,this.alias=n,this.length=0|(a||"").length,this.greedy=!!r};if(a.stringify=function(e,t,r){if("string"==typeof e)return e;if("Array"===n.util.type(e))return e.map(function(n){return a.stringify(n,t,e)}).join("");var l={type:e.type,content:a.stringify(e.content,t,r),tag:"span",classes:["token",e.type],attributes:{},language:t,parent:r};if(e.alias){var i="Array"===n.util.type(e.alias)?e.alias:[e.alias];Array.prototype.push.apply(l.classes,i)}n.hooks.run("wrap",l);var o=Object.keys(l.attributes).map(function(e){return e+'="'+(l.attributes[e]||"").replace(/"/g,"&quot;")+'"'}).join(" ");return"<"+l.tag+' class="'+l.classes.join(" ")+'"'+(o?" "+o:"")+">"+l.content+"</"+l.tag+">"},!_self.document)return _self.addEventListener?(n.disableWorkerMessageHandler||_self.addEventListener("message",function(e){var t=JSON.parse(e.data),a=t.language,r=t.code,l=t.immediateClose;_self.postMessage(n.highlight(r,n.languages[a],a)),l&&_self.close()},!1),_self.Prism):_self.Prism;var r=document.currentScript||[].slice.call(document.getElementsByTagName("script")).pop();return r&&(n.filename=r.src,n.manual||r.hasAttribute("data-manual")||("loading"!==document.readyState?window.requestAnimationFrame?window.requestAnimationFrame(n.highlightAll):window.setTimeout(n.highlightAll,16):document.addEventListener("DOMContentLoaded",n.highlightAll))),_self.Prism}();"undefined"!=typeof module&&module.exports&&(module.exports=Prism),"undefined"!=typeof global&&(global.Prism=Prism);
			Prism.languages.markup={comment:/<!--[\s\S]*?-->/,prolog:/<\?[\s\S]+?\?>/,doctype:/<!DOCTYPE[\s\S]+?>/i,cdata:/<!\[CDATA\[[\s\S]*?]]>/i,tag:{pattern:/<\/?(?!\d)[^\s>\/=$<%]+(?:\s+[^\s>\/=]+(?:=(?:("|')(?:\\[\s\S]|(?!\1)[^\\])*\1|[^\s'">=]+))?)*\s*\/?>/i,greedy:!0,inside:{tag:{pattern:/^<\/?[^\s>\/]+/i,inside:{punctuation:/^<\/?/,namespace:/^[^\s>\/:]+:/}},"attr-value":{pattern:/=(?:("|')(?:\\[\s\S]|(?!\1)[^\\])*\1|[^\s'">=]+)/i,inside:{punctuation:[/^=/,{pattern:/(^|[^\\])["']/,lookbehind:!0}]}},punctuation:/\/?>/,"attr-name":{pattern:/[^\s>\/]+/,inside:{namespace:/^[^\s>\/:]+:/}}}},entity:/&#?[\da-z]{1,8};/i},Prism.languages.markup.tag.inside["attr-value"].inside.entity=Prism.languages.markup.entity,Prism.hooks.add("wrap",function(a){"entity"===a.type&&(a.attributes.title=a.content.replace(/&amp;/,"&"))}),Prism.languages.xml=Prism.languages.extend("markup",{}),Prism.languages.html=Prism.languages.markup,Prism.languages.mathml=Prism.languages.markup,Prism.languages.svg=Prism.languages.markup;
			Prism.languages.css={comment:/\/\*[\s\S]*?\*\//,atrule:{pattern:/@[\w-]+?[\s\S]*?(?:;|(?=\s*\{))/i,inside:{rule:/@[\w-]+/}},url:/url\((?:(["'])(?:\\(?:\r\n|[\s\S])|(?!\1)[^\\\r\n])*\1|.*?)\)/i,selector:/[^{}\s][^{};]*?(?=\s*\{)/,string:{pattern:/("|')(?:\\(?:\r\n|[\s\S])|(?!\1)[^\\\r\n])*\1/,greedy:!0},property:/[-_a-z\xA0-\uFFFF][-\w\xA0-\uFFFF]*(?=\s*:)/i,important:/!important\b/i,"function":/[-a-z0-9]+(?=\()/i,punctuation:/[(){};:,]/},Prism.languages.css.atrule.inside.rest=Prism.languages.css,Prism.languages.markup&&(Prism.languages.insertBefore("markup","tag",{style:{pattern:/(<style[\s\S]*?>)[\s\S]*?(?=<\/style>)/i,lookbehind:!0,inside:Prism.languages.css,alias:"language-css",greedy:!0}}),Prism.languages.insertBefore("inside","attr-value",{"style-attr":{pattern:/\s*style=("|')(?:\\[\s\S]|(?!\1)[^\\])*\1/i,inside:{"attr-name":{pattern:/^\s*style/i,inside:Prism.languages.markup.tag.inside},punctuation:/^\s*=\s*['"]|['"]\s*$/,"attr-value":{pattern:/.+/i,inside:Prism.languages.css}},alias:"language-css"}},Prism.languages.markup.tag));
			Prism.languages.clike={comment:[{pattern:/(^|[^\\])\/\*[\s\S]*?(?:\*\/|$)/,lookbehind:!0},{pattern:/(^|[^\\:])\/\/.*/,lookbehind:!0,greedy:!0}],string:{pattern:/(["'])(?:\\(?:\r\n|[\s\S])|(?!\1)[^\\\r\n])*\1/,greedy:!0},"class-name":{pattern:/((?:\b(?:class|interface|extends|implements|trait|instanceof|new)\s+)|(?:catch\s+\())[\w.\\]+/i,lookbehind:!0,inside:{punctuation:/[.\\]/}},keyword:/\b(?:if|else|while|do|for|return|in|instanceof|function|new|try|throw|catch|finally|null|break|continue)\b/,"boolean":/\b(?:true|false)\b/,"function":/\w+(?=\()/,number:/\b0x[\da-f]+\b|(?:\b\d+\.?\d*|\B\.\d+)(?:e[+-]?\d+)?/i,operator:/--?|\+\+?|!=?=?|<=?|>=?|==?=?|&&?|\|\|?|\?|\*|\/|~|\^|%/,punctuation:/[{}[\];(),.:]/};
			Prism.languages.scss=Prism.languages.extend("css",{comment:{pattern:/(^|[^\\])(?:\/\*[\s\S]*?\*\/|\/\/.*)/,lookbehind:!0},atrule:{pattern:/@[\w-]+(?:\([^()]+\)|[^(])*?(?=\s+[{;])/,inside:{rule:/@[\w-]+/}},url:/(?:[-a-z]+-)*url(?=\()/i,selector:{pattern:/(?=\S)[^@;{}()]?(?:[^@;{}()]|#\{\$[-\w]+\})+(?=\s*\{(?:\}|\s|[^}]+[:{][^}]+))/m,inside:{parent:{pattern:/&/,alias:"important"},placeholder:/%[-\w]+/,variable:/\$[-\w]+|#\{\$[-\w]+\}/}},property:{pattern:/(?:[\w-]|\$[-\w]+|#\{\$[-\w]+\})+(?=\s*:)/,inside:{variable:/\$[-\w]+|#\{\$[-\w]+\}/}}}),Prism.languages.insertBefore("scss","atrule",{keyword:[/@(?:if|else(?: if)?|for|each|while|import|extend|debug|warn|mixin|include|function|return|content)/i,{pattern:/( +)(?:from|through)(?= )/,lookbehind:!0}]}),Prism.languages.insertBefore("scss","important",{variable:/\$[-\w]+|#\{\$[-\w]+\}/}),Prism.languages.insertBefore("scss","function",{placeholder:{pattern:/%[-\w]+/,alias:"selector"},statement:{pattern:/\B!(?:default|optional)\b/i,alias:"keyword"},"boolean":/\b(?:true|false)\b/,"null":/\bnull\b/,operator:{pattern:/(\s)(?:[-+*\/%]|[=!]=|<=?|>=?|and|or|not)(?=\s)/,lookbehind:!0}}),Prism.languages.scss.atrule.inside.rest=Prism.languages.scss;
		</script>
	</body>
</html>
